<template>
  <div class="mima_box">
    <ul class="mima_ul">
      <li class="mima_li">
        <span>手机号码</span>
        <input type="text" v-model="shoujihao" placeholder="请填写手机号码" />
      </li>
      <li class="mima_li mima_li_input mima_li2">
        <span>验证码</span>
        <input type="text" v-model="yanzhengma" placeholder="请填手机验证码" />
        <!-- 验证码 -->
        <p class="p">
          <span v-if="inentify" @click="send" style="color:#d31d17">获取验证码</span>
          <span v-if="timer">{{count}}s</span>
        </p>
      </li>
      <li class="mima_li">
        <span>新密码</span>
        <input type="password" v-model="xinmima" placeholder="请填写新密码" />
      </li>
      <li class="mima_li">
        <span>确认新密码</span>
        <input type="password" v-model="quepassword" placeholder="请确认填写新密码" />
      </li>
    </ul>
    <button class="red_btn" @click="querenxiugai">确认修改</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shoujihao: "", //请填写手机号码
      yanzhengma: "", //请填手机验证码
      xinmima: "", //请填写新密码
      quepassword: "", //请确认填写新密码
      inentify: true, //获取验证码显示
      timer: false, //倒计时显示
      count: 60, //倒计时
      time: ""
    };
  },
  methods: {
	//  发送短信
	async send(){
		// 判断手机号为空
		if (!this.shoujihao) {
			// 提示
			this.$toast("请填写手机号");
			return;
		}
		// 对接口 psot
		try {
			let res=await this.http.post("/api/member/send/sms",{
				// 对参数
				mobile:this.shoujihao
			})
			// 正确提示
			 this.$toast("发送成功");
		} catch (error) {
			// 否则
			this.$toasted.error(res.message,{icon:"errpr"}).goAway(2000);
		}
		// 计时器
		(this.inentify=!this.inentify),
		(this.timer=true),
		(this.time=setInterval(()=>{
			this.count-=1;
			if (this.count==0) {
				clearInterval(this.time);
				this.inentify=this.inentify;
				this.timer=true;
				this.count=60
			}
		},1000));
	},
	// 确认修改
    async querenxiugai() {
		// 判断为空
		if (!this.shoujihao||!this.yanzhengma||!this.xinmima||!this.quepassword) {
			//提示
			 this.$toast("请输入完善信息");
			return;
		}
		// 对接口
		try {
			let res=await this.http.post("/api/deal/pwd",{
				// 对参数
				mobile:this.shoujihao,
				sms:this.yanzhengma,
				pwd:this.xinmima,
				confirm_pwd:this.quepassword
			})
			// 提示
			if (res.status_code==200) {
				 this.$toast("修改成功");
			} else {
				 this.$toast(res.message);
			}
		} catch (error) {
			// 拒绝
			// this.$toasted.error(error.message,{icon:"error"}).goAway(2000);
		}
	}
  }
};
</script>

<style>
@import url("../../assets/css/ttcp/chongzhi.css");
.mima_box {
  background-color: #f2f2f2;
  height: 100vh;
}
.mima_box .mima_ul .mima_li span {
  width: 24%;
}
.mima_box .mima_ul .mima_li2 span:last-child {
  width: 100%;
}
.mima_box .mima_ul .mima_li_input input {
  width: 43%;
}
.mima_li2 p{width: 30%;text-align: right}
.mima_li2 p span{color: #d31d17;}
.mima_box .mima_ul .mima_li{display: flex;justify-content: flex-start;}
</style>